<template>
  <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search"  v-model="keyWord"/> &nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
</template>

<script>
    
    export default {
        name:"Search",
        data() {
            return {
                keyWord:""
            }
        },
        methods:{
            searchUsers(){
                // 请求前更新数据
                console.log("this:",this)
               this.$bus.$emit('updateListData',{isFirst:false,isLoading:true,errMsg:'',users:[]})
              this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
              response =>{
                console.log("请求成功了",response.data.items)
                this.$bus.$emit('updateListData',{isLoading:false,users:response.data.items})
              },
              error =>{
                console.log("请求失败了",error.message)
                this.$bus.$emit('updateListData',{isLoading:false,errMsg:error.message,users:[]})

              }
            )
            }
        }
    }
</script>

<style>

</style>